<template>
  <div class="complete">
      <div class="hint">
          <img src="../../assets/图标@3x.png" alt="">
      </div>
      <div class="succeed">
          <p>完成注册</p>
          <p>欢迎使用一生教育平台</p>
      </div>
      <div class="issue">

      </div>
      <div class="next-step">
          <mt-button @click="submit" class="next-step-btn" type="default">{{number}}</mt-button>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            number: 3,
            skip:''
        }
    },
    mounted() {
    this.skip =   setInterval(() => {
            this.number--
            if (this.number == 0) {
                clearInterval(this.skip)
                this.$router.push({ path: '/material' })
            }
        }, 1000)
    },
    methods: {
        submit() {
            clearInterval(this.skip)
            this.$router.push({ path: '/material' })
        }
    }
}
</script>

<style lang="less">
@mainColor: #00d8c9;
.complete {
    padding: 0 0.6rem;
    .hint {
        margin: 2.1rem 0 1.2rem;
        > img {
            display: block;
            margin: 0 auto;
            width: 2.41rem;
            height: 2.09rem;
        }
    }
    .succeed {
        > p {
            font-size: 0.36rem;
            color: #333;
            font-weight: 600;
            text-align: center;
            &:last-child {
                font-weight: 500;
                margin-top: 0.3rem;
            }
        }
    }
    .next-step {
        > .next-step-btn {
            width: 100%;
            background-color: @mainColor;
            margin-top: 1.2rem;
            height: 0.8rem;
            border-radius: 40px;
            color: #fff;
        }
    }
}
</style>

